<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件绑定</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background: #c90;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>

    <script type="text/babel">
      //声明对象
      let obj = {
        fn: function () {
          alert("我是对象的方法");
        },
      };
      //声明 test 函数
      function test() {
        return () => {
          console.log("test");
        };
      }

      //创建虚拟 DOM 对象
      let vdom = (
        <div>
          <h2>基本演示</h2>
          <div
            className="box"
            onClick={function () {
              alert("你点击了我!!");
            }}
          >
            一般函数
          </div>
          <h2>箭头函数</h2>
          <div
            className="box"
            onClick={() => {
              alert("你点击了我!! - 箭头函数");
            }}
          >
            箭头函数
          </div>
          <h2>对象方法</h2>
          <div className="box" onClick={obj.fn}>
            对象方法
          </div>
          <h2>函数调用</h2>
          <div className="box" onClick={test()}>
            函数调用
          </div>

          <h2>多拼词</h2>
          <div className="box" onMouseOver={() => {
            console.log('你来了我的身边')
          }}>
          </div>

          <h2>阻止默认行为</h2>
          <a href="http://www.baidu.com" onClick={(e) => {
            //阻止默认行为, 只能使用 e.preventDefault
            e.preventDefault();
          }}>百度</a>

          <h2>事件对象</h2>
          <div className="box" onClick={(e) => {
            console.log(e);
            console.log(e.clientX, e.clientY);
          }}>
          鼠标位置
          </div>

          <h2>input 元素的 onChange 事件对象</h2>
          <input type="text" onChange={() => {
            console.log('发生了改变');
          }} />
        </div>
      );

      //渲染
      ReactDOM.render(vdom, document.querySelector("#root"));
    </script>
  </body>
</html>
